<template>
  <!-- 个人信息区 -->
         <el-card shadow="always" style="margin: 30px;width: 500px;">
          <el-form label-width="80px" size="small" >
            <!-- <el-upload disabled
                class="avatar-uploader"
                :action="'http://'+serverIp+':9090/file/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
                <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
                <el-icon v-else class="el-icon-plus avatar-uploader-icon"><Plus /></el-icon>
            </el-upload> -->

            <el-form-item label="商家id">
              <el-input disabled v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账户">
              <el-input disabled v-model="form.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input  disabled type="password"  v-model="form.password"  style="width:270px" autocomplete="off"></el-input>
              <el-button type="" @click="handlePassword" style="margin-left: 20px;">修改密码</el-button>
            </el-form-item>
             <el-form-item label="电话">
              <el-input v-model="form.phone"  style="width:180px" autocomplete="off"></el-input>
              <el-input v-model="form.yzm" placeholder="验证码" style="width: 70px;margin-left: 20px;" autocomplete="off"></el-input>
              <el-button type="" @click="12" style="margin-left: 20px;">发送验证码</el-button>
            </el-form-item>
            <el-form-item label="营业时间">
              <!-- <el-input v-model="form.busTime" autocomplete="off" style="width:270px"></el-input> -->
              <!-- <el-button type="" @click="handleBusTime" style="margin-left: 20px;">修改时间</el-button> -->
            <el-time-picker v-model="time1" placeholder="Arbitrary time" />

            </el-form-item>
            
           
            <el-form-item label="地址">
              <el-input type="textarea"  v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
            <div style="text-align: center;">
              <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="不,再想想"
                icon-color="#626AEF"
                title="您确定要修改信息吗?"
                @confirm="save()"
              >
                <template #reference>
                 <el-button type="primary">保存</el-button>
                </template>
              </el-popconfirm>
                <!-- <el-button type="warning">取消</el-button> -->
            </div>
            
        </el-card>

        <!-- 对话框 -->
         <el-dialog  title="修改密码" v-model="dialogFormVisible" width="26%" >
          <el-form :model="pwd" :rules="rules" label-width="80px" size="small" ref="userPassword">
            <el-form-item prop="password1" label="原密码">
              <el-input type="password" v-model="pwd.password1" show-password style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item prop="password2" label="新密码">
             <el-input type="password" v-model="pwd.password2" show-password style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item prop="password3" label="确认密码">
              <el-input type="password" v-model="pwd.password3" show-password style="width: 200px;"></el-input>
            </el-form-item>
          </el-form>
            <div style="text-align:center;margin-top: 40px;">
              <span class="dialog-footer" style="text-align:center;">
                <el-button @click=" this.dialogFormVisible = false,this.pwd = {}">取消</el-button>
                <el-button type="primary" @click="savePwd">
                  确定
                </el-button>
              </span>
            </div>
        </el-dialog>



</template>

<script>
import bus from 'vue3-eventbus'
import { mapState } from 'vuex'
import {serverIp} from '../../public/config.js'

export default {
    name:"Person",
    data(){
        return {
          serverIp:serverIp,
            form:{
                // busTime: new Date(2016, 9, 10, 18, 30)
            },
            pwd:{},
            rules: {
                password1: [
                  { required: true, message: '请输入原密码', trigger: 'blur' },
                  { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password2: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                password3: [
                  { required: true, message: '请确认密码', trigger: 'blur' },
                  { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
              },
            

            time1:new Date("Mon Oct 10 2016 "+"11:40:00"),
            
            dialogFormVisible:false,
        }
    },
    created(){
        this.getUser().then(res => {
            this.form = res
            // this.form.avatarUrl = res.avatarUrl.replace("localhost","124.223.163.xxx")
            //console.log("@@@",this.form)
            
            if(this.form.busTime !== null){
              this.time1 = new Date("Mon Oct 10 2016 "+this.form.busTime)
            }else{
              this.time1 = new Date("Mon Oct 10 2016 "+"08:40:00")
            }
        })
    },
    methods:{
         async getUser() {                                   //默认商家id为1
            return (await this.request.get("/merchants/info/" + this.mUser.id)).data
            },

      savePwd() {
            this.$refs['userPassword'].validate((valid) => {
              if (valid) {  // 表单校验合法


              if (this.pwd.password1 !== this.form.password) {
                  this.$message.error("原密码错误，请重新输入")
                  return false
                }

              if (this.pwd.password2 !== this.pwd.password3) {
                  this.$message.error("两次输入的密码不一致")
                  return false
                }
              //验证通过，保存密码到form

              this.form.password = this.pwd.password3 

              this.dialogFormVisible = false;
              this.pwd = {}
              }
            });
          },





        // 保存
        save(){

          //console.log(this.time1);
          let time = this.time1.toTimeString().slice(0,8) + ''
          // 准备JSON
          let M = {
            //商家id
                    id:this.mUser.id,
                    phone:this.form.phone,
                    password:this.form.password,
                    address:this.form.address,
                    busTime:time,
                  } 
            this.request.put("/merchants/update",JSON.stringify(M)).then(res => {
              //发送给后台
              //console.log("发送给后台",this.form);
                if(res.code === 200){
                  //console.log("###",res);
                    this.$message.success("保存成功")
                    // 更新浏览器存储的用户信息
                    // this.getUser().then(res => {
                    //     res.token = JSON.parse(localStorage.getItem("user")).token
                    //     localStorage.setItem("user", JSON.stringify(res))
                    // })
                    //bus更新header头像
                    // //console.log("通知header",this.form.avatarUrl);
                    // bus.emit("updateAvatar",this.form.avatarUrl)
                }else{
                    this.$message.error("保存失败")
                }
            })
            
        },
        // 修改密码按钮
        handlePassword(){
          this.dialogFormVisible = true
        },
        handleAvatarSuccess(res) {
          //console.log("tx",res);
          // res = res.replace("localhost","124.223.163.123")
            this.form.avatarUrl = res
            }
    },
    computed:{
      ...mapState("personAbout",["mUser"])
    }
}
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>